<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1> 变量的值= {{info}} </h1>
        <h1> 姓名= {{stname}} </h1>
        <h1> 年龄= {{age}} </h1>
    </div> 

<script>
var vm = {
    el: '#app',
    elhtml:'',
    data:{
        info: '龙龟',
        stname: 'temo',
        age:10
    },update:function(){//更新网页信息
        let div =document.querySelector("#app");
        var up=this.elhtml;
        for(let key in this.data){
             up =up.replace("{{"+key+"}}",  this.data[key])
        }
        div.innerHTML = up;
    }
}
//保留网页原始数据
vm.elhtml = document.querySelector("#app").innerHTML;

//循环访问器
for(let key in vm.data){
Object.defineProperty(vm,key,{
    set:function(v){
        console.log('自动调用...',v);
        this.data[key] = v;
        //网页更新
        this.update();
    }
});
}




//测试
vm.info = '寡妇';
console.log( vm.data );


</script>
</body>
</html>